<template>
  <div ref="container" class="w-full h-full pb-5">
    <div class="flex h-full pl-5 pr-5">
      <div
        class="w-1/2 left-box flex h-full overflow-hidden rounded-2xl bg-white"
      >
        <div class="h-full w-full overflow-hidden">
          <div ref="leftContainer">
            <customer-card :customerInfo="customerInfo" />
            <div class="flex justify-between border-b">
              <span class="ml-5 pb-5"
                >{{ t("selected") }}&nbsp;<b class="text-rose-600">{{
                  cartState.total_cart
                }}</b
                >&nbsp;{{ t("items") }}</span
              >
              <a-popconfirm
                :content="t('clearCartConfirm')"
                type="warning"
                @ok="clear_cart"
                :okText="t('yes')"
                :cancelText="t('no')"
              >
                <span
                  class="flex items-center cursor-pointer mr-5 pb-5 text-gray-500 hover:text-blue-400 active:text-blue-400"
                >
                  <icon-delete size="16" />
                  <span class="text-xs">{{ t("clearCart") }}</span>
                </span>
              </a-popconfirm>
            </div>
          </div>
    
          <carts :cartHeight="cartHeight" :cartList="cartState.cartList" :del_goods="del_goods" :fetchChangeCart="fetchChangeCart" />
  
          <div class="w-full shaw-1" :style="`height:${cartPaymentHeight}px;`">
            <div class="flex justify-between border-b">
              <div
                class="cursor-pointer font-bold p-3 flex items-center active:text-blue-400"
                @click="modalsState.showSalesPerson = true"
              >
                <span class="pr-1 text-md">{{
                  cashierState.currentStaff.staff_name
                }}</span>
                <icon-down />
              </div>
              <div class="flex justify-between items-center text-sm pr-3">
                  <a-statistic
                    :value="cartState.payPrice"
                    :precision="2"
                    show-group-separator
                    :value-style="{ fontSize: '20px', color: 'red' }"
                  >
                    <template #prefix>¥</template>
                  </a-statistic>
                  &nbsp;
                  <span class="flex items-center text-sm">
                  <a-popconfirm
                    content="Do you want to discard the draft?"
                    okText="Close"
                    cancelText=" "
                  >
                    <icon-question-circle
                      class="cursor-pointer text-gray-400 hover:text-gray-600"
                      size="13"
                    />
                    <template #content>
                      <h3 class="text-center font-bold mb-3 border-b">
                        {{ t("details") }}
                      </h3>
                      <p class="mb-1">
                        {{ t("originalPrice", { price: cartState.payPrice }) }}
                      </p>
                      <p class="mb-1">
                        {{ t("memberDiscount", { discount: 0 }) }}
                      </p>
                      <p class="mb-1">{{ t("couponAmount", { amount: 0 }) }}</p>
                      <p class="mb-1">
                        {{ t("pointsDeduction", { points: 0 }) }}
                      </p>
                      <p>{{ t("limitedTimeDiscount", { discount: 0 }) }}</p>
                    </template>
                  </a-popconfirm>
                </span>
            </div>
            </div>
            <div class="p-5">
              <a-button
                long
                type="primary"
                :disabled="cartState.payPrice === 0"
                class="h-11"
                shape="round"
                @click="modalsState.showPayment = true"
              >
                <span class="text-base font-bold">{{ t("checkout") }}</span>
              </a-button>
            </div>
          </div>
        </div>
        <div class="pt-5 pl-3 pr-3 border-l">
          <counter-tools :stages="toolsState" />
        </div>
      </div>
      <div class="w-1/2 h-full ml-5">
       <production-search :cateList="cateList" />
       <production-card :goodsList="goodsList" :openGoodsAttr="openGoodsAttr" />
      </div>
    </div>
    <drawer-payment :paymentInfo="paymentInfo" :modalTitle="t('paymentType')" />
    <modal-goods-attr
      v-if="productAttrs.goodsName"
      :modalTitle="t('goodsAttr')"
      :productAttrs="productAttrs"
    />
    <!--    <modal-customer-list v-if="modalsState.showCustomerModal" :customerList="customerList"/>-->
    <modal-salesperson
      :modalTitle="t('modalSalespersonTitle')"
      :staff-list="cashierState.staffList"
    />
    <modal-sales-mark :modalTitle="t('remark')" />
    <modal-modify-price :modalTitle="t('remark')" />
    <modal-recharge :modalTitle="t('remark')" :recharges="rechargeList" />
    <drawer-customer-search />
    <!--  customer create drawer  -->
    <drawer-customer-create />
  </div>
</template>
<script setup>
import { ref, provide, watch, reactive, onMounted, nextTick } from "vue";
import { cashierProduct, cashierCate, cashierDetail } from "@/api/product.js";
import ModalGoodsAttr from "./components/modal-goods-attr.vue";
import {
  cashierCart,
  cashierCartDel,
  cashierCartList,
  cashierCartNum,
  cashierCompute,
} from "@/api/order.js";
import { getRechargeInfo } from "@/api/store.js";
import { customerListSearch } from "@/api/customer.js";
import { infoApi, cashierList } from "@/api/user.js";
import { Message } from "@arco-design/web-vue";
import { useI18n } from "vue-i18n";
import { fetchData } from "@/utils/customFunc.js";
import CustomerCard from "@/views/cashier/components/customer-card.vue";
import DrawerPayment from "@/views/cashier/components/drawer-payment.vue";
import ModalSalesMark from "@/views/cashier/components/modal-sales-mark.vue";
import ModalSalesperson from "@/views/cashier/components/modal-salesperson.vue";
import CounterTools from "@/views/cashier/components/counter-tools.vue";
import ModalModifyPrice from "@/views/cashier/components/modal-modify-price.vue";
import ModalRecharge from "@/views/cashier/components/modal-recharge.vue";
import DrawerCustomerSearch from "@/views/customer/components/drawer-customer-search.vue";
import DrawerCustomerCreate from "@/views/customer/components/drawer-customer-create.vue";
import productionSearch from "./components/production-search.vue";
import productionCard from "./components/production-card.vue";
import carts from "./components/cart-list.vue";

const { t } = useI18n();

const container = ref(null);

const leftContainer = ref(null);

//current cart ids
const cartIds = ref([]);

// Query conditions
const searchCondition = reactive({
  store_name: null,
  field_key: "all",
  cate_id: null,
  page: 1,
  limit: 30,
  uid: 22690,
  staff_id: 4,
});
// paymenbt info
const paymentInfo = reactive({
  total_price: 0,
  order_sn: "",
});

// Product list
const goodsList = ref([]);
// Product categories
const cateList = ref([]);
// Shopping cart list
const cartList = ref([]);
// Customer list
const customerList = ref([]);
//recharge info form backend.
const rechargeList = ref([]);

//using time as a new one.
const tourist_uid = ref(Date.now());

// Current customer
const customerInfo = ref({
  uid: 0,
  full_name: "--",
  balance: 0,
  integral: 0,
  avatar: "",
});

// Cashier staff data
const cashierState = reactive({
  count: 0,
  currentStaff: {},
  staffList: [],
});

// Product attributes
const productAttrs = reactive({
  attrs: {},
  stock: 0,
  price: 0,
  imageUrl: null,
  goodsName: null,
  isSkill: false,
});

//tools status
const toolsState = reactive({
  pendingOrder: true,
  recharge: true,
  points: true,
  coupon: true,
  changePrice: true,
  mark: true,
});

// Modal states
const modalsState = reactive({
  showGoodsAttrsModal: false,
  showPayment: false,
  showSalesPerson: false,
  showPriceDetail: false,
  showRecharge: false,
  showModifyPrice: false,
  showMark: false,
  showCustomerSearchModal: false,
  showCustomerCreate: false,
});

const toolsWidth = ref(0);
const cartWidth = ref(0);
// Cart height
const cartHeight = ref(0);
// Payment button height
const cartPaymentHeight = ref(170);

const cartState = reactive({
  total_cart: 0,
  payPrice: 0,
});

onMounted(async () => {
  await nextTick();
  if (container.value) {
    cartHeight.value =
      container.value.clientHeight -
      (leftContainer.value.clientHeight + cartPaymentHeight.value);
    cartWidth.value = Math.round((leftContainer.value.clientWidth / 100) * 67);
    toolsWidth.value = Math.round((leftContainer.value.clientWidth / 100) * 33);
  }
});

const setModalVisibility = (modalName, visible) => {
  modalsState[modalName] = visible;
};

//To empty the cart.
const clear_cart = () => {
  fetchData(
    () => cashierCartDel(customerInfo.value.uid, { ids: cartIds.value }),
    (data, msg) => {
      cartIds.value = [];
      // get cart newly list again.
      fetchCashierCartList();
      Message.success(msg);
    }
  );
};

// To delete one item in cart
const del_goods = (item) => {
  let ids = cartIds.value;
  console.log(ids, item.id);
  fetchData(
    () => cashierCartDel(customerInfo.value.uid, { ids: [item.id] }),
    (data, msg) => {
      let index = ids.indexOf(item.id);
      if (index !== -1) {
        cartIds.value.splice(index, 1);
      }
      //console.log(cartIds.value)
      // get cart newly list again.
      fetchCashierCartList();
      Message.success(msg);
    }
  );
};

//To create a new cart and add a goods to the cart.
const addCart = (attrs) => {
  attrs.staff_id = cashierState.currentStaff.id;
  if (customerInfo.value.uid === 0) {
    attrs.tourist_uid = tourist_uid;
  }
  fetchData(
    () => cashierCart(customerInfo.value.uid, attrs),
    (data, msg) => {
      if (data.cartId) {
        Message.success(msg);
        !cartIds.value.includes(data.cartId)
          ? cartIds.value.push(data.cartId)
          : null;
        //console.log(cartIds.value);
        // get cart newly list again.
        fetchCashierCartList();
      }
    }
  );
};

//get a attrs of the product and open a modal
const openGoodsAttr = (product) => {
  //console.log(product)
  fetchData(
    () => cashierDetail(product.id, customerInfo.value.uid),
    (data) => {
      productAttrs.goodsName = data.storeInfo.store_name;
      productAttrs.imageUrl = data.storeInfo.image;
      productAttrs.price = data.storeInfo.price;
      productAttrs.stock = data.storeInfo.stock;
      productAttrs.attrs = data.productAttr;
      productAttrs.productValue = data.productValue;
      modalsState.showGoodsAttrsModal = true;
      //console.log(data);
    }
  );
};

const setNewCustomer = (customer) => {
  customerInfo.value = customer;
  fetchCashierCartList();
};

const getCustomerList = async (map) => {
  const { data } = await customerListSearch(map);
  return data;
};

//Set up a new clerk to make a sale
const setNewStaff = (staff) => {
  modalsState.showSalesPerson = false;
  cashierState.currentStaff = staff;
  //to get cart list again base new staff or new customer
  fetchCashierCartList();
};

// Fetch product list and update the goods list
const fetchCashierProduct = () => {
  fetchData(
    () => cashierProduct(searchCondition),
    (data) => {
      goodsList.value = data.list;
      //console.log(data.list);
    }
  );
};

//get recharge data for api
const fetchRechargeList = () => {
  fetchData(getRechargeInfo, (data) => {
    rechargeList.value = data.recharge_quota;
    //console.log(data)
  });
};

//to change the item quality in the cart.
const fetchChangeCart = (item) => {
  fetchData(
    () =>
      cashierCartNum(customerInfo.value.uid, {
        id: item.id,
        number: item.cart_num,
      }),
    (data) => {
      fetchCashierCartList();
    }
  );
};

// Fetch product categories and update the category list
const fetchProductCategory = () => {
  fetchData(cashierCate, (data) => {
    cateList.value = data;
  });
};

// Fetch cart list and update the cart state
const fetchCashierCartList = () => {
  const customer_id = customerInfo.value.uid;
  const staff_id = cashierState.currentStaff.id;
  let maps = {};
  if (customer_id === 0) {
    maps.tourist_uid = tourist_uid.value;
  }
  fetchData(
    () => cashierCartList(customer_id, staff_id, maps),
    async (res) => {
      cartList.value = res.valid && res.valid.length > 0 ? res.valid : [];
      cartState.total_cart = res.count;
      if (res.count > 0) {
        //enable mark of order
        toolsState.mark = false;
        //enable pending order
        toolsState.pendingOrder = false;
        for (const element of res.valid) {
          const { cart } = element;
          for (const item of cart) {
            cartIds.value.push(item.id);
          }
        }
        console.log(cartIds.value);
        fetchCashierCompute();
      } else {
        cartState.payPrice = 0;
      }
    }
  );
};

//To calculate the cart price.
const fetchCashierCompute = () => {
  fetchData(
    () =>
      cashierCompute(customerInfo.value.uid, {
        cart_id: cartIds.value,
        coupon: false,
        coupon_id: 0,
        integral: false,
      }),
    (data) => {
      cartState.payPrice = data.payPrice;
      paymentInfo.total_price = data.payPrice;
      paymentInfo.order_sn = data.order_sn;
      console.log(data);
    }
  );
};

// Fetch customer list and update the customer list state
const fetchCustomerList = () => {};

// Fetch cashier list and update the cashier state
const fetchCashierList = () => {
  const map = {
    keyword: null,
    page: 1,
    limit: 12,
  };
  fetchData(
    () => cashierList(map),
    (data) => {
      cashierState.count = data.count;
      cashierState.currentStaff = data.staffInfo;
      cashierState.staffList = data.staffList;
      //get cart list base on current staff id;
      fetchCashierCartList();
    }
  );
};

// To get a record with current cutomer
const fetchCustomerCartRecord = () => {
  if (customerInfo.value.uid === 0) {
    return false;
  }
  const params = {};
  fetchData(
    () => infoApi(params),
    (data) => {
      console.log(data);
    }
  );
};

// Fetch cashier list and update the cashier state
const fetchSwitchCustomer = () => {
  fetchData(infoApi, (data) => {});
};

// Use Promise.all to call all fetch functions in parallel
const fetchAllData = async () => {
  await Promise.all([
    fetchProductCategory(),
    fetchCustomerCartRecord(),
    fetchCashierProduct(),
    fetchCashierList(),
    fetchRechargeList(),
  ]);
};

provide("modalsState", modalsState);
provide("setModalVisibility", setModalVisibility);

provide("setNewStaff", setNewStaff);
provide("setNewCustomer", setNewCustomer);
provide("getCustomerList", getCustomerList);
provide("addCart", addCart);

// Call the function to fetch all data
fetchAllData();
</script>

<style scoped lang="less">
.left-box {
  min-width: 380px;
}

.trip {
  display: flex;
  padding: 5px 10px;
  align-items: center;
  border-radius: 0 0 10px 0;
  flex-direction: column;
  justify-content: center;
}
</style>
